<template>
	<view class="app">
		<z-paging
			show-refresher-update-time
			show-refresher-when-reload
			v-model="serviceList"
			ref="paging"
			:auto="false"
			@query="queryList"
		>
			<view slot="empty" v-if="isLogin">
				<u-empty text="该地区暂无服务" mode="address"></u-empty>
			</view>
			<banner ref="banner" name="index" :br="0"></banner>
			<view class="main">
				<view class="tips">
					<view class="tip" v-for="(i, ix) in tips" :key="ix">
						<image
							class="icon"
							:src="require('@/static/home/tips-' + ix + '.png')"
						></image>
						<text>{{ i }}</text>
					</view>
				</view>
				<view class="notice">
					<image class="icon" src="@/static/home/notice.png"></image>
					<u-notice-bar
						style="flex: 1; font-weight: bold"
						padding="18rpx 6rpx"
						font-size="26rpx"
						bg-color="#fff"
						mode="vertical"
						color="#333"
						:list="notices2"
						:volume-icon="false"
						@click="vk.navigateTo('/pages/notice/list')"
					></u-notice-bar>
				</view>
				<view class="cates">
					<view class="cate" :class="{ sel1: cur === 0 }" @tap="change(0)">上门按摩</view>
					<view class="cate" :class="{ sel2: cur === 1 }" @tap="change(1)">助娱向导</view>
				</view>
				<view class="title" v-if="shifus.length > 0">
					<image class="icon" src="@/static/home/img-shifu.png"></image>
					<text style="margin-top: -2rpx">{{ tags[cur] }}</text>
				</view>
				<scroll-view scroll-x class="shifus">
					<view class="shifu" v-for="i in shifus" :key="i._id" @tap="checkShifu(i)">
						<image mode="aspectFill" class="thumb" :src="i.avatar || src"></image>
						<image class="tip" :src="i.hot" v-if="i.hot"></image>
						<text>{{ i.nickname }}</text>
					</view>
				</scroll-view>
				<view class="title">
					<image class="icon" src="@/static/home/img-project.png"></image>
					<text style="margin-top: -2rpx">推荐服务</text>
					<view class="address" @tap="jumpAddress">
						<u-icon
							style="transform: translateY(2rpx)"
							name="map-fill"
							size="32"
						></u-icon>
						<text style="margin-left: 2rpx">{{ address }}</text>
					</view>
				</view>
				<block v-for="item in serviceList" :key="item._id">
					<service-item
						:item="item"
						:btnText="cur === 0 ? '选择技师' : '选择达人'"
					></service-item>
				</block>
			</view>
		</z-paging>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
var vk = uni.vk // vk依赖
import banner from "./components/banner"
import serviceItem from "./components/service-item"

export default {
	components: { banner, serviceItem },
	data() {
		return {
			// 状态栏高度
			statusBarHeight: systemInfo.statusBarHeight,
			src: require("@/static/mine/icon_tx.png"),
			address: "",
			tips: ["严格品控", "手法熟练", "准时到达", "认证信息"],
			tags: ["推荐技师", "推荐向导"],
			cur: 0,
			shifus: [],
			serviceList: [],
			notices1: [],
			notices2: [],

			flag: false,
			isLogin: false
		}
	},
	onLoad(opt) {
		// #ifdef APP-PLUS
		let aaabbb = vk.getStorageSync("aaabbb")
		if (!aaabbb) return
		// #endif
		let that = this
		if (opt.code) {
			vk.userCenter.code2SessionWeixin({
				data: { code: opt.code },
				success(data) {
					vk.setStorageSync("openid", data.openid)
					vk.callFunction({
						url: "client/user.saveOpenId",
						title: "请求中...",
						data: { openid: data.openid }
					}).then(() => {
						that.$nextTick(() => {
							that.$refs.banner.init()
							that.startLocat()
						})
					})
				}
			})
		} else {
			that.$nextTick(() => {
				that.$refs.banner.init()
				that.startLocat()
			})
		}
		uni.$on("cityChange", item => {
			that.address = item
			vk.setStorageSync("addr", item)
			if (that.$refs.paging) that.$refs.paging.reload()
		})
	},
	onShow() {
		let city = vk.getStorageSync("addr")
		if (city && city != this.address && this.flag) {
			this.address = city
			this.flag = true
			this.$nextTick(() => {
				this.$refs.paging.reload()
			})
		}
	},
	methods: {
		// 定位
		startLocat() {
			this.flag = true
			//#ifdef H5
			vk.showLoading("获取中...")
			uni.getLocation({
				type: "gcj02",
				success: async res => {
					vk.hideLoading()
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					vk.callFunction({
						url: "client/pub.getH5City",
						title: "请求中...",
						data: { lonlat: [res.longitude, res.latitude] }
					}).then(res => {
						this.address = res.city
						this.$refs.paging.reload()
						vk.setStorageSync("isAdr", true)
					})
				},
				fail: () => {
					vk.hideLoading()
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
			//#endif
			//#ifdef MP
			vk.showLoading("获取中...")
			uni.getLocation({
				type: "wgs84",
				success: async res => {
					vk.hideLoading()
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					vk.callFunction({
						url: "client/pub.getH5City",
						title: "请求中...",
						data: { lonlat: [res.longitude, res.latitude] }
					}).then(res => {
						this.address = res.city
						this.$refs.paging.reload()
						vk.setStorageSync("isAdr", true)
					})
				},
				fail: () => {
					vk.hideLoading()
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
			//#endif
			//#ifdef APP-PLUS
			uni.getLocation({
				type: "gcj02",
				geocode: true,
				success: async res => {
					if (!res.address) {
						return vk.alert("定位失败，请稍后重试~")
					}
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					this.address = res.address.city
					this.$refs.paging.reload()
					vk.setStorageSync("isAdr", true)
				},
				fail: () => {
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
			//#endif
		},
		// 切换
		change(e) {
			this.cur = e
			this.shifus = []
			this.$refs.paging.reload()
		},
		// 查询服务列表
		queryList(pageIndex, pageSize) {
			const { address, cur } = this
			vk.callFunction({
				url: "client/pub.getProjectListIndex",
				data: { pageSize, pageIndex, address, cur },
				success: res => {
					if (res.shifus) {
						this.shifus = res.shifus
					}
					if (res.notices) {
						this.notices1 = res.notices
						this.notices2 = vk.pubfn.arrayObjectGetArray(res.notices, "title")
					}
					if (res.open == -1) {
						this.$refs.paging.complete(false)
						vk.toast('当前城市尚未开通，可选择其它城市','none');
					} else {
						this.$refs.paging.complete(res.rows)
					}
					vk.hideLoading()
				},
				fail: () => {
					vk.hideLoading()
				}
			})
		},
		// 跳转地址
		jumpAddress() {
			vk.navigateTo(`/pages/search/address?city=${this.address}`)
		},
		// 跳转技师
		checkShifu(item) {
			vk.navigateTo(`/pages/shifu/detail?id=${item._id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 50px);
	/* #endif */
	background: linear-gradient(135deg, #eafff8 0%, #e7fcff 100%);
}

.main {
	z-index: 99;
	border-radius: 30rpx 30rpx 0 0;
	background: linear-gradient(135deg, #eafff8 0%, #e7fcff 100%);
	position: relative;
	margin-top: -30rpx;
}
.tips {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 34rpx 14rpx;
	.tip {
		font-size: 22rpx;
		display: flex;
		align-items: center;
		.icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
}
.notice {
	display: flex;
	align-items: center;
	background: #fff;
	box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.08);
	border-radius: 12rpx;
	margin: 6rpx 24rpx;
	padding: 0 20rpx;
	min-height: 70rpx;
	.icon {
		width: 32rpx;
		height: 32rpx;
	}
}
.cates {
	display: flex;
	align-items: center;
	background: #fff;
	box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.06);
	width: 340rpx;
	border-radius: 30rpx;
	margin: 30rpx auto 0;
	color: #666;
	.cate {
		flex: 1;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sel1 {
		background: linear-gradient(270deg, #6fd1dd 0%, #24c388 100%);
		box-shadow: 0 3rpx 12rpx rgba(0, 168, 116, 0.36);
		border-radius: 6rpx 30rpx 30rpx 30rpx;
		color: #fff;
	}
	.sel2 {
		background: linear-gradient(270deg, #6fd1dd 0%, #24c388 100%);
		box-shadow: 0 3rpx 12rpx rgba(0, 168, 116, 0.36);
		border-radius: 30rpx 6rpx 30rpx 30rpx;
		color: #fff;
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: bold;
	padding: 26rpx 24rpx 0;
	.icon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 4rpx;
	}
	.address {
		margin-left: auto;
		font-weight: normal;
		font-size: 26rpx;
	}
}
.shifus {
	white-space: nowrap;
	margin: 20rpx 0 0 26rpx;
	font-size: 26rpx;
	.shifu {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		font-weight: bold;
		margin: 0 36rpx 0 4rpx;
		position: relative;
	}
	.thumb {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
	}
	.tip {
		width: 180rpx;
		height: 180rpx;
		position: absolute;
		top: 0;
	}
}
</style>
